<!-- 商品 -->
<template>
    <el-card class="card-bottom">
        <FormTable :parameter="parameter" :formList="formList" @onquery="onquery" @onReset="onReset"></FormTable>
    </el-card>
    <el-card>
        <PageTable ref="tableRef" :column="column" :parameter="parameter" :query="GetGoodsListListApi">
            <template #goodsStatus="{ row }">
                <div class="balanceType"
                    :style="{ color: balanceTypeObj[row.goodsStatus].color, backgroundColor: balanceTypeObj[row.goodsStatus].bgk }">
                    {{ balanceTypeObj[row.goodsStatus].text }}
                </div>
            </template>
            <template #titleImage="{ row }">
                <el-image :preview-src-list="[row.titleImage]" :preview-teleported="true" style="width: 50px; height: 50px"
                    :src="row.titleImage" />
            </template>
            <template #action="{ row }">
                <el-button v-if="!row.pick" @click="pickFn(row)">选择</el-button>
                <el-button v-else @click="reverseFn(row)" type="primary">选中</el-button>
            </template>
        </PageTable>
    </el-card>
</template>

<script setup>

import { reactive, ref, defineComponent, defineExpose } from "vue";
import FormTable from '@/components/FormTable'
import PageTable from '@/components/PageTable'
import { GetGoodsListListApi } from "@/api/GoodsList";


defineComponent({
    components: {
        FormTable,
        PageTable
    }
})


const balanceTypeObj = {
    1: {
        text: '上架',
        color: '#409EFF',
        bgk: '#ECF5FF'
    },
    2: {
        text: '下架',
        color: '#F56C6C',
        bgk: '#FEF0F0'
    }
}

const parameter = reactive({
    belongFlag: 0,
    username: null,
    phoneNumber: null,
    balanceType: null,
    createTime: [],
    createTimeStart: null,
    createTimeEnd: null,
})

const positionType = ref([])
//商品分类列表查询(下拉框)
async function GetArticleLabel() {
    // const res = await GetGoodsClassifyListApi({
    //     pageNum: 1,
    //     pageSize: 20,
    // })
    // console.log(res);
}
// GetArticleLabel()


const formList = ref([
    {
        type: 'input',
        label: '商品名称',
        code: 'username',
    },

    {
        type: 'select',
        label: '商品分类',
        options: [
            { label: '收入', value: 1 },
            { label: '支出', value: 2 },
        ],
        code: 'balanceType',
    },
    {
        type: 'select',
        label: '上架状态',
        options: [
            { label: '收入', value: 1 },
            { label: '支出', value: 2 },
        ],
        code: 'balanceType',
    },

])
const column = [
    { label: '商品名称', prop: 'goodsTitle' },
    { label: '商品图片', slots: 'titleImage' },
    { label: '商品分类', prop: 'classifyName' },
    { label: '商品价格', prop: 'sellingPrice' },
    { label: '成本价', prop: 'costPrice' },
    { label: '上架状态', slots: 'goodsStatus' },
    { label: '操作', slots: 'action' },
]

// 搜索条件查询
const tableRef = ref()
function onquery() {
    tableRef.value.refresh()

}
function onReset() {
    parameter.username = null
    parameter.phoneNumber = null
    parameter.balanceType = null
    parameter.createTimeStart = null
    parameter.createTimeEnd = null
    parameter.createTime = []
    tableRef.value.refresh(true)
}

const Pickid = ref()
const type = 6
function pickFn(row) {
    row.pick = true
}

//反选
function reverseFn(row) {
    Pickid.value = ''
    row.pick = false
}

defineExpose({ Pickid, type })

</script>

<style scoped lang="scss">
.balanceType {
    width: 44px;
    height: 24px;
    border-radius: 4px;
    text-align: center;
    line-height: 24px;
}
</style>